<template>
  <div class="content">
    <jc-title />
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :msg="tacitly"
          @seek="collect"
          @hand="detailsListHandle()"
        />
        <el-button
          type="primary"
          class="btn"
          size="mini"
          @click="detailsListHandle()"
        >
          {{ $t('btn.search') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          style="margin-left: 0"
          @click="handleExportDetails"
        >
          <!--导出Excel-->{{ $t('btn.toExcel') }}
        </el-button>
      </div>
    </div>
    <div class="table-content">
      <jc-table
        :table-data="detailsData"
        :table-header="detailsHeader"
        :table-height="tableHeight"
        @selectionChange="selectionDatas"
      >
        <el-table-column type="selection" width="30px" align="center" />
        <template v-slot:text2Slot="clo">
          <el-link
            type="primary"
            @click="detailPurchase(clo.scope.row.fid)"
          >
            {{ clo.scope.row.fbillNo }}
          </el-link>
        </template>
        <!--        商品图片-->
        <template v-slot:billSlot="col">
          <img :src="$img + col.scope.row.fimg" style="width: 50px;height: auto;max-height: 50px;">
        </template>
        <!--        状态-->
        <template v-slot:btnState="col">
          <span v-if="col.scope.row.fdocumentStatus === ''" />
          <el-tag
            v-else
            :type="col.scope.row.stateColor"
          >{{ col.scope.row.fdocumentStatus }}</el-tag>
        </template>
        <!--        状态-->
        <template v-slot:tagSlot="col">
          <el-tag v-if="col.scope.row.fconfirmdtatus === '客户申请撤销'" type="danger"><!--客户申请撤销-->
            {{ $t('shop.customRevocation') }}</el-tag>
          <span v-else-if="col.scope.row.fconfirmdtatus === ''" />
          <el-tag v-else type="primary">{{ col.scope.row.fconfirmdtatus }}</el-tag>
        </template>
        <!--        操作-->
        <template v-slot:btnSlot="col">
          <el-button
            v-if="col.scope.row.fdocumentStatus"
            size="mini"
            type="warning"
            :disabled="col.scope.row.fdocumentStatus === this.$t('market.state2')"
            @click="revocation(col.scope.row)"
          ><!--申请撤销-->{{ $t('shop.withdrawClaim') }}</el-button>
          <el-button
            v-if="col.scope.row.fdocumentStatus"
            size="mini"
            type="danger"
            @click="removeOrd(col.scope.row.fid)"
          ><!--删除-->{{ $t('shop.delete') }}</el-button>
        </template>
      </jc-table>
      <!--    分页器-->
      <div class="footer">
        <jc-pagination
          v-show="totalDatail > 0"
          :total="totalDatail"
          :page.sync="currentPageDetail"
          :limit.sync="sizeDetail"
          @pagination="detailsList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { queryTSalOrderapplyList, checkIsAbleAudit1, deleteSalApply } from '@/api/marketManage/saleReport'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { toMxAmina, notoMxAmina } from '@/components/ToMxamineState'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'

export default {
  name: 'MarketApplyList',
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      ftype: 6,
      // 表头
      tableData: [], // 销售数据
      selectVal: [], // 删除销售订单数组
      fbillNoDetails: '',
      totalDatail: 0,
      currentPageDetail: 1,
      sizeDetail: 200,
      detailsData: [],
      detailVal: '',
      detailsHeader: [
        { label: this.$t('shop.timeApplication'), prop: 'fdate' }, // 申请时间
        {
          label: this.$t('shop.codeApplication'), // 申请单号
          type: 'text2',
          prop: 'fbillNo',
          width: '120'
        },
        {
          label: this.$t('shop.customerOrder'), // 客户订单号
          prop: 'fpaezText1'
        },
        { label: this.$t('shop.fmodel'), prop: 'fmodel', width: '120' }, // 助记码
        { label: this.$t('shop.productName'), prop: 'fname', width: '150' }, // 商品名称
        { label: this.$t('shop.productImg'), type: 'bill', prop: 'fimg', width: '80' }, // 商品图片
        { label: this.$t('shop.productDescript'), prop: 'fdescripTion', minWidth: '200' }, // 商品描述
        { label: this.$t('shop.price1'), prop: 'ftaxPrice', width: '70' }, // 单价
        { label: this.$t('shop.number'), prop: 'fqty', width: '70' }, // 数量'
        { label: this.$t('shop.subtotal'), prop: 'ftaxamount', width: '70' }, // 小计
        { label: this.$t('shop.salesman'), prop: 'fsaler' }, // 销售员
        { label: this.$t('shop.contactWay'), prop: 'fphone' }, // 联系方式
        { // 状态
          label: this.$t('shop.state'),
          type: 'state',
          prop: 'fdocumentStatus',
          width: '70'
        },
        { // 客户状态
          label: this.$t('shop.customState'),
          prop: 'fconfirmdtatus',
          type: 'tag',
          width: '120'
        },
        { // 操作
          label: this.$t('shop.operation'),
          type: 'btn',
          width: '160'
        }
      ],
      tableHeader1: [],
      tableHeight: '72vh'
    }
  },
  created() {
    this.detailsList()
    this.tableHeader1 = this.detailsHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 210px)' : '72vh'
  },
  methods: {
    // 撤销申请
    revocation(ev) {
      const { fdocumentStatus } = notoMxAmina(ev)
      const DATA = { fid: ev.fid, fdocumentStatus: fdocumentStatus, fconfirmdtatus: 'C' }
      checkIsAbleAudit1(DATA).then(res => {
        if (res.code === 0) {
          this.detailsList()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 订单详情
    detailPurchase(ev) {
      const id = ev.fid || ev
      this.$router.push({ path: `/marketApplyDetail/${id}` })
    },
    // 删除
    removeOrd(ev) {
      const DATA = { fid: ev }
      deleteSalApply(DATA).then(res => {
        if (res.code === 0) {
          this.detailsList()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
      })
    },
    // 导出表格-销售订单明细列表
    handleExportDetails() {
      require.ensure([], () => {
        const tHeader = this.detailsHeader.map(res => {
          return res.label
        })
        const filterVal = this.detailsHeader.map(res => {
          return res.prop
        })
        if (this.detailsData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else if (this.val && this.val.length > 0) {
          const list = this.val.map(item => {
            if (item.fcloseStatus === 'A') {
              item.fcloseStatus = '正常'
            } else {
              item.fcloseStatus = '已关闭'
            }
            return toMxAmina(item)
          })
          const data = formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '客户下单列表')
        } else {
          queryTSalOrderapplyList({
            pageSize: 100000,
            pageNum: 1,
            search: this.searCollData
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.array.map(item => {
                if (item.fcloseStatus === 'A') {
                  item.fcloseStatus = '正常'
                } else {
                  item.fcloseStatus = '已关闭'
                }
                return toMxAmina(item)
              })
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '销售申请列表')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 销售订单明细列表
    async detailsList(ev) {
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const fuserId = window.sessionStorage.getItem('fuserId')
      const DATA = {
        pageNum: this.currentPageDetail,
        pageSize: this.sizeDetail,
        fcustId: fuserId,
        search: this.searCollData.concat(this.details)
      }
      const { data: RES } = await queryTSalOrderapplyList(DATA)
      this.detailsData = RES.array
      this.detailsData.map(item => {
        if (item.fconfirmdtatus === 'A') {
          item.fconfirmdtatus = '客户已确认'
        } else if (item.fconfirmdtatus === 'B') {
          item.fconfirmdtatus = '业务员已确认'
        } else if (item.fconfirmdtatus === 'C') {
          item.fconfirmdtatus = '客户申请撤销'
        } else if (item.fconfirmdtatus === 'D') {
          item.fconfirmdtatus = '业务员已同意撤销'
        } else if (item.fconfirmdtatus === 'E') {
          item.fconfirmdtatus = '业务员不同意撤销'
        }
        return toMxAmina(item)
      })
      this.totalDatail = RES.total
    },
    detailsListHandle(ev) {
      this.currentPageDetail = 1
      if (ev && ev.fname) {
        this.customHandle(ev)
        this.detailsList(ev.detail)
      } else {
        this.detailsList()
      }
    },
    // 查询物料
    detailMateriel(FNUMBER) {
      this.$router.push({ path: `/detailMateriel/${FNUMBER}` })
    },
    // 明细列表 多选时触发的事件
    selectionDatas(val) {
      this.detailVal = ''
      this.detailVal = val[0].fbillNo
      this.selectVal = []
      this.selectIds = []
      this.val = val
      if (val.length > 0) {
        val.forEach(res => {
          this.selectVal.push(res.fbillNo)
          this.selectIds.push(res.fid)
        })
      }
    },
    // 自定义列表
    customHandle(ev) {
      this.tableHeaders = []
      if (ev.header) {
        ev.header.forEach(item => {
          this.tableHeader1.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.detailsHeader = this.tableHeaders
      } else if (ev.fname === '缺省方案') {
        this.detailsHeader = this.oldTabHeader
      } else {
        this.detailsHeader = this.tableHeader1
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  @include listBom;
  .el-table {
    overflow: visible !important;
    position: relative;
    &::v-deep .el-table__footer-wrapper {
      font-size: 13px;
      position: absolute;
      bottom: 0;
    }
  }
  .header {
    position: relative;

    .header-name {
      width: 100%;
    }

    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
      z-index: 999;
    }
  }
}

.inTheBtn {
  transform: translateY(-15px);
}

.tag-mar {
  margin-right: 3px;
  margin-bottom: 3px;
}

.tag-mar:hover {
  cursor: pointer;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 2.76vh;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
